<template>
  <view class="help-container">
    <view v-for="(item, findex) in list" :key="findex" :title="item.title" class="list-title">
      <view class="text-title">
        <view :class="item.icon"></view>{{ item.title }}
      </view>
      <view class="childList">
        <view v-for="(child, zindex) in item.childList" :key="zindex" class="question" hover-class="hover"
          @click="handleText(child)">
          <view class="text-item">{{ child.title }}</view>
          <view class="line" v-if="zindex !== item.childList.length - 1"></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";

const list = ref([{
  icon: 'iconfont icon-food',
  title: '点餐问题',
  childList: [{
    title: '如何下单？',
    content: '在首页选择您喜欢的餐厅，浏览菜单后将餐品加入购物车，确认订单信息后点击支付即可完成下单。'
  }, {
    title: '如何查看订单状态？',
    content: '您可以在"订单"页面查看所有订单的状态，包括待付款、待出餐、待取餐和已完成等状态。'
  }, {
    title: '如何取消订单？',
    content: '在订单未被商家接单前，您可以在订单详情页点击"取消订单"按钮进行取消。一旦商家开始制作，订单将无法取消。'
  }, {
    title: '忘记取餐码怎么办？',
    content: '您可以在"订单"页面找到相应订单，点击"查看取餐码"即可再次查看取餐码。'
  }]
},
{
  icon: 'iconfont icon-help',
  title: '常见问题',
  childList: [{
    title: '如何修改收货地址？',
    content: '请点击[我的] - [收货地址]，在地址列表中选择需要修改的地址进行编辑，或添加新的地址。'
  }, {
    title: '如何联系商家？',
    content: '在订单详情页面，您可以找到"联系商家"按钮，点击后可以直接拨打商家电话进行沟通。'
  }, {
    title: '如何评价订单？',
    content: '订单完成后，您可以在订单详情页点击"评价"按钮，对餐品质量、配送速度等方面进行评分和评价。'
  }]
}
])

function handleText(item) {
  uni.navigateTo({
    url: `/pages/common/textview/index?title=${item.title}&content=${item.content}`
  });
}
</script>

<style lang="scss" scoped>
page {
  background-color: #f8f8f8;
}

.help-container {
  margin-bottom: 100rpx;
  padding: 30rpx;
}

.list-title {
  margin-bottom: 30rpx;
}

.childList {
  background: #ffffff;
  box-shadow: 0px 0px 10rpx rgba(193, 193, 193, 0.2);
  border-radius: 16rpx;
  margin-top: 10rpx;
}

.line {
  width: 100%;
  height: 1rpx;
  background-color: #F5F5F5;
}

.text-title {
  color: #303133;
  font-size: 32rpx;
  font-weight: bold;
  margin-left: 10rpx;

  .iconfont {
    font-size: 16px;
    margin-right: 10rpx;
  }
}

.text-item {
  font-size: 28rpx;
  padding: 24rpx;
}

.question {
  color: #606266;
  font-size: 28rpx;
}
</style>
